<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Row Hover Effect with JavaScript</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
        }
        .highlight {
            background-color: aquamarine; /* 高亮背景颜色 */
        }
    </style>
</head>
<body>
    <table id="myTable">
        <tr>
            <th>产品名</th>
            <th>规格</th>
            <th>价格</th>
        </tr>
        <tr>
            <td>xiaomi 14pro</td>
            <td>16+1t</td>
            <td>5999</td>
        </tr>
        <tr>
            <td>xiaomi 15pro</td>
            <td>16+1t</td>
            <td>6499</td>
        </tr>
        <!-- 更多行 -->
    </table>

    <script>
        const table = document.getElementById('myTable');
        const rows = table.getElementsByTagName('tr');

        // 为每一行添加鼠标进入和离开事件监听器
        for (let i = 1; i < rows.length; i++) { // 从1开始，因为第一行是标题行
            rows[i].addEventListener('mouseenter', function() {
                this.classList.add('highlight');
            });
            rows[i].addEventListener('mouseleave', function() {
                this.classList.remove('highlight');
            });
        }
    </script>
</body>
</html>